<template>
  <div id="Header"  style="border-bottom:#409EFF">
    <el-row>  
      <el-col :span="3" style="font-family:'PingFang SC';">
        <img src="../Images/Logo.png" style="width:200px;Height:100px;margin-top:23px;" />
      </el-col>
      <el-col :span="18">
        <el-autocomplete 
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          style="width:60%;line-height:100px;"
          prefix-icon="el-icon-search"
          placeholder="找电影，导演，演员"
          @change="
            drawerMovie = true;
            id = +new Date();

          "
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="
              drawerMovie = true;
              id = +new Date();
              showstate()
            "
          ></el-button>
        </el-autocomplete>
      </el-col>
      <el-col :span="2">
        <el-button @click="drawer = true" v-if="LoginI" type="text">
         
          <el-avatar :src="ImgSrc" style="margin-top:20px;"></el-avatar>
        </el-button>

        <el-dropdown :hide-on-click="false" v-if="LoginI">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="Cpwd = true">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="OrderIn = true">我的订单</el-dropdown-item>
            <el-dropdown-item @click.native="OrderRefund = true">已退订单</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--<el-button type="text" style="" @click="Cpwd = true" v-if="LoginI" >修改密码</el-button>-->
        <el-dialog title="修改密码" :visible.sync="Cpwd " width="30%">
          <ChangePwd :key="id"></ChangePwd>
        </el-dialog>
        <el-drawer title="我的订单" :visible.sync="OrderIn" direction="btt" size="80%">
          <el-scrollbar>
            <ReTick :key="id"></ReTick>
          </el-scrollbar>
        </el-drawer>
        <el-drawer title="已退订单" :visible.sync="OrderRefund" direction="btt" size="80%">
          <el-scrollbar>
            <ReFund :key="id"></ReFund>
          </el-scrollbar>
        </el-drawer>

        <div v-if="Logining">
          <el-drawer title="用户信息" :visible.sync="drawer" :with-header="false">
            <el-form
              ref="form"
              :model="form"
              label-width="80px"
              style="margin-top:50px;"
              v-if="ShowUser"
            >
              <el-form-item label="头像">
                <el-col :span="11">
                  <el-avatar :src="ImgSrc" v-model="form.image"></el-avatar>
                </el-col>
              </el-form-item>
              <el-form-item label="姓名">
                <el-col :span="11">
                  <el-input v-model="this.User.UserName" :disabled="true"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="性别">
                <el-col :span="11">
                  <el-input v-model="this.Sex" :disabled="true"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="生日">
                <el-col :span="11">
                  <el-input v-model="this.Birth" style="width: 100%;" :disabled="true"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="电话">
                <el-col :span="11">
                  <el-input v-model="this.User.PhoneNum" :disabled="true"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="地址">
                <el-col :span="11">
                  <el-input v-model="this.User.UserAddress" :disabled="true"></el-input>
                </el-col>
              </el-form-item>
            </el-form>

            <el-button type="primary" class="UpdateUser" @click="UpdateUser">修改信息</el-button>

            <el-form
              ref="form"
              :model="form"
              label-width="80px"
              style="margin-top:50px;"
              v-if="ChangeUser"
            >
              <el-form-item label="头像">
                <el-col :span="11">
                  <el-avatar :src="ImgSrc" v-model="form.image"></el-avatar>
                </el-col>
              </el-form-item>
              <el-form-item label="姓名">
                <el-col :span="11">
                  <el-input v-model="form.name"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="性别">
                <el-col :span="11">
                  <el-radio v-model="form.region" label="1">男</el-radio>
                  <el-radio v-model="form.region" label="2">女</el-radio>
                </el-col>
              </el-form-item>
              <el-form-item label="生日">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="form.date1"
                    style="width: 100%;"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="电话">
                <el-col :span="11">
                  <el-input v-model="form.phone"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="地址">
                <el-col :span="11">
                  <el-input v-model="form.Address"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">修改</el-button>
                <el-button @click="Out">取消</el-button>
              </el-form-item>
            </el-form>

            <el-popover placement="top" width="160" v-model="visible">
              <p>确定退出登录吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="LoginOut">确定</el-button>
              </div>
              <el-button slot="reference" icon="el-icon-switch-button" class="LoginOut">退出登录</el-button>
            </el-popover>
          </el-drawer>
        </div>
        <el-button
          type="text"
          @click="centerDialogVisible = true"
          style="line-height:70px"
          v-if="Logins"
        >登录</el-button>
        <el-dialog title="登录" :visible.sync="centerDialogVisible" width="30%" center>
          <div style="height:200px;">
            <el-col :offset="1" style="margin-bottom:30px;">
              <el-input style="width:300px" placeholder="请输入账号" v-model="LoginID" clearable></el-input>
            </el-col>
            <el-col :offset="1" style="margin-bottom:30px;">
              <el-input style="width:300px" placeholder="请输入密码" v-model="LoginPwd" show-password></el-input>
            </el-col>
            <span slot="footer" class="dialog-footer" style="margin-left:180px;">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="Login()">登录</el-button>
            </span>
          </div>
        </el-dialog>
        <el-button @click="Regis = true" type="primary" style="margin-left: 16px;" v-if="Logins">注册</el-button>

        <el-drawer title="注册" :visible.sync="Regis" :with-header="false">
          <register :key="id"></register>
        </el-drawer>
      </el-col>
    </el-row>
    <el-drawer
      title="电影查询"
      :visible.sync="drawerMovie"
      direction="btt"
      size="80%"
      :with-header="false"
    >
      <SelectMovie :key="id" :MovieName="this.state"></SelectMovie>
    </el-drawer>
  </div>
</template>
<script>
import SelectMovie from "@/views/SelectMovie";
import Register from "@/views/Register";
import ChangePwd from "@/views/ChangePwd";
import ReTick from "@/views/ReTick";
import ReFund from "@/views/ReFund";
export default {
  components: {
    SelectMovie,
    Register,
    ChangePwd,
    ReTick,
    ReFund
  },
  data() {
    return {
      id: +new Date(),
      activeIndex: "1",
      restaurants: [],
      state: "",
      timeout: null,
      MovieNames: [],
      centerDialogVisible: false,
      LoginID: null,
      LoginPwd: null,
      Logins: true,
      ImgSrc: "",
      LoginI: false,
      drawer: false,
      drawerMovie: false,
      User: this.$cookies.get("User"),
      visible: false,
      Birth: "",
      form: {
        name: "",
        region: "1",
        date1: "",
        phone: "",
        Address: "",
        image: ""
      },
      ChangeUser: false,
      ShowUser: true,
      Sex: null,
      dateOfBirth: "",
      Logining: false,
      MovieName: "",
      Regis: false,
      Cpwd: false,
      OrderIn: false,
      OrderRefund: false
    };
  },
  created() {
    var stat = this.$cookies.get("sta");

    if (stat == "true") {
      this.LoginI = true;
      this.Logins = false;
      this.ImgSrc =require("../Images/" + this.User.UserTx) ;
      this.Logining = true;
    }
    this.Sex = this.User.Sex ? "男" : "女";
    this.Birth = this.User.UserBirth.substring(0, 10);
  },
  methods: {
    showstate() {
      console.log(this.state);
    },
    loadAll() {
      this.restaurants = [];
      for (let i = 0; i < this.MovieNames.length; i++) {
        this.restaurants.push({ value: this.MovieNames[i].MovieName });
      }

      return this.restaurants;
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.loadAll();
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        );
      };
    },
    Login() {
      this.Ajax.get(
        "api/User/LoginbyUserName?LoginName=" +
          this.LoginID +
          "&LoginPwd=" +
          this.LoginPwd
      ).then(L => {
        if (L.data != -1 && L.data != -2) {
          this.$notify({
            title: "成功",
            message: "登录成功",
            type: "success"
          });

          this.$cookies.set("User", L.data);
          this.$cookies.set("sta", true);
          setTimeout(function() {
            window.location.reload();
          }, 1000);
        } else if (L.data == -1) {
          this.$notify.error({
            title: "错误",
            message: "账号或者密码错误"
          });
          this.LoginID = "";
          this.LoginPwd = "";
        } else {
          this.$notify.error({
            title: "错误",
            message: "用户不存在，请注册"
          });
          this.$router.push("Register");
          this.centerDialogVisible = false;
        }
      });
    },
    handleSelect(item) {
      console.log(item);
    },
    LoginOut() {
      this.$cookies.set("User", null);
      this.$cookies.set("sta", false);
      this.visible = false;
      window.location.reload();
    },
    GiveUser() {
      this.Ajax.get("api/User/SelectUser?ID=" + this.User.UserID).then(u => {
        this.$cookies.set("User", u.data);
      });
    },
    onSubmit() {
      if (this.imageUrl == "") {
        this.imageUrl = this.User.UserTx;
      }
      this.Ajax.post("api/User/UpdateUser", {
        data: {
          UserID: this.User.UserID,
          UserName: this.form.name,
          UserSex: this.form.region,
          UserBirthDay: this.form.date1,
          PhoneNum: this.form.phone,
          UserAddress: this.form.Address,
          UserTx: this.User.UserTx,
          UserPwd: this.User.UserPwd,
          UserAccount: this.User.UserAccount
        }
      }).then(U => {
        if (U.data == 1) {
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success"
          });
          window.location.reload();
          this.GiveUser();
        } else {
          this.$notify.error({
            title: "错误",
            message: "修改失败！"
          });
        }
      });
    },
    UpdateUser() {
      this.ChangeUser = true;
      this.ShowUser = false;
    },
    Out() {
      this.ChangeUser = false;
      this.ShowUser = true;
    }
  },
  mounted() {
    this.Ajax.get("api/MovieInfoes/GetMovieInfo").then(M => {
      this.MovieNames = M.data;
    });
  }
};
</script>
<style scoped>
.el-col {
  text-align: center;
  font-family: "PingFang SC";
}
.LoginOut {
  position: fixed;
  bottom: 5%;
  right: 8.5%;
}
.UpdateUser {
  position: fixed;
  bottom: 5%;
  right: 15.5%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
